<template>
  <p style="color:rgba(121, 121, 121, 0.4)">其他管理/权限管理/子账号管理</p>
  <el-card>

  <div id="u10785_text" class="text" >
    <p style="font-size: 20px;font-weight: bolder">子账号管理</p>
  </div>


  <el-row>

    <el-col :span="12"><div class="grid-content ep-bg-purple" />
      <!--      搜索-->
      <div class="mt-4">
        <el-input placeholder="请输入角色名称" style="width: 300px">
          <template #prepend>
            <el-select v-model="select" placeholder="全部角色" style="width: 115px">
              <el-option label="全部角色" value="1" />
              <el-option label="商家客服" value="2" />
              <el-option label="骑手客服" value="3" />
              <el-option label="售后客服" value="4" />
            </el-select>
          </template>
          <template #append>
            <el-button :icon="Search" />
          </template>
        </el-input>
      </div>
    </el-col>

    <el-col :span="12"><div class="grid-content ep-bg-purple-light" />
      <!--      添加按钮-->
      <el-button type="primary" @click="dialogTableVisible = true">+添加</el-button>
      <el-dialog v-model="dialogTableVisible" title="添加用户名">
        <el-form :model="form">
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" placeholder="限4-16个字母和数字,必须以字母开头,不区分大小写"/>
          </el-form-item>
          <el-form-item label="真实姓名" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="角色" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="请选择">
              <el-option label="管理员" value="shanghai" />
              <el-option label="快递员客服" value="beijing" />
              <el-option label="会员端客服" value="beijing" />
              <el-option label="智能柜终端客服" value="beijing" />
            </el-select>
          </el-form-item>
          <div class="mb-2 flex items-center text-sm">
            <el-radio-group v-model="radio1" class="ml-4">
              <el-radio label="1" size="large">启用</el-radio>
              <el-radio label="2" size="large">禁用</el-radio>
            </el-radio-group>
          </div>
        </el-form>
        <template #footer>
      <span class="dialog-footer" label-position="center">
         <el-button type="primary" @click="dialogFormVisible = false">
          确认
        </el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </span>
        </template>
      </el-dialog>
    </el-col>
  </el-row>

  <!--表格-->
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="username" label="用户名" width="180" />
    <el-table-column prop="name" label="真实姓名" width="180" />
    <el-table-column prop="role" label="角色" width="180" />
    <el-table-column prop="state" label="状态" width="180" />
    <el-table-column prop="last" label="最近登录时间" width="180" />
    <el-table-column prop="create" label="创建时间" width="180" />

    <el-table-column fixed="right" label="Operations" width="180">
<!--修改-->
      <template #default>
        <el-button @click="dialogModifyVisible = true">修改</el-button>
        <el-dialog v-model="dialogModifyVisible" title="修改用户名">

          <el-form :model="form">
            <el-form-item label="用户名" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"  placeholder="限4-16个字母和数字,必须以字母开头,不区分大小写"/>
            </el-form-item>
            <el-form-item label="真实姓名" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
            <el-form-item label="角色" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="请选择">
              <el-option label="管理员" value="shanghai" />
              <el-option label="快递员客服" value="beijing" />
              <el-option label="会员端客服" value="beijing" />
              <el-option label="智能柜终端客服" value="beijing" />
            </el-select>
            </el-form-item>
            <div class="mb-2 flex items-center text-sm">
              <el-radio-group v-model="radio2" class="ml-4">
                <el-radio label="1" size="large">启用</el-radio>
                <el-radio label="2" size="large">禁用</el-radio>
              </el-radio-group>
            </div>
          </el-form>
          <template #footer>
      <span class="dialog-footer" label-position="center">
         <el-button type="primary" @click="dialogFormVisible = false">
          确认
        </el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </span>
          </template>
        </el-dialog>
<!--启用-->
        <el-button text @click="centerDialogVisible1=true">
          启用
        </el-button>

        <el-dialog v-model="centerDialogVisible1" title="提示" width="30%" center>
    <span>
     您确认要启用xxx子账号吗?
    </span>
          <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible1=false">
          确认
        </el-button>
        <el-button @click="centerDialogVisible1=false">取消</el-button>
      </span>
          </template>
        </el-dialog>
<!--禁用-->
        <el-button text @click="centerDialogVisible2=true">
          禁用
        </el-button>

        <el-dialog v-model="centerDialogVisible2" title="提示" width="30%" center>
    <span>
     您确认要禁用xxx子账号吗?
    </span>
          <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible2=false">
          确认
        </el-button>
        <el-button @click="centerDialogVisible2=false">取消</el-button>
      </span>
          </template>
        </el-dialog>
<!--删除-->
        <el-button text @click="centerDialogVisible3=true">
          删除
        </el-button>

        <el-dialog v-model="centerDialogVisible3" title="提示" width="30%" center>
    <span>
     您确认要删除xxx角色吗?
    </span>
          <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible3=false">
          确认
        </el-button>
        <el-button @click="centerDialogVisible3=false">取消</el-button>
      </span>
          </template>
        </el-dialog>
      </template>
    </el-table-column>
  </el-table>

  <el-row>
    <el-col :span="10">
      <P>共x条</P>
    </el-col>
    <el-col :span="14">
      <div style="margin: 20px 0px 20px 0">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[20,40,60,80]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            :pager-count="pagerCount"
        />
      </div>
    </el-col>
  </el-row>
  </el-card>
</template>

<script setup>
import {reactive, ref} from "vue";
import { Search } from '@element-plus/icons-vue'
const input = ref('')
const radio1 = ref('1')
const radio2 = ref('1')

let dialogModifyVisible=ref(false)
let dialogTableVisible=ref(false)


const centerDialogVisible1 = ref(false)
const centerDialogVisible2= ref(false)
const centerDialogVisible3 = ref(false)



const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const gridData = [
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-04',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-01',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-03',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },

]



const handleClick = () => {
  console.log('click')
}

const tableData = [
  {
    username: 'Administrator',
    name: '超级管理员',
    role: '超级管理员',
    state: '正常',
    last:'2023-01-2511:50:19',
    creat:'2022-10-2621:10:13',
    tag: 'Home',
  },
  {
    username: 'user002',
    name: '陈二',
    role: '快递员客服',
    state: '已禁用',
    last:'2023-01-2511:50:19',
    creat:'2022-10-2621:10:13',
    tag: 'Office',
  },
  {
    username: 'user003',
    name: '张三',
    role: '会员端客服',
    state: '正常',
    last:'2023-01-2511:50:19',
    creat:'2022-10-2621:10:13',
    tag: 'Home',
  },
  {
    username: 'user004',
    name: '李四',
    role: '智能柜终端客服',
    state: '正常',
    last:'2023-01-2511:50:19',
    creat:'2022-10-2621:10:13',
    tag: 'Office',
  },
  {
    username: 'user005',
    name: '王五',
    role: '超级管理员',
    state: '正常',
    last:'2023-01-2511:50:19',
    creat:'2022-10-2621:10:13',
    tag: 'Home',
  },
  {
    username: 'user006',
    name: '赵六',
    role: '快递员客服',
    state: '正常',
    last:'2023-01-2511:50:19',
    creat:'2022-10-2621:10:13',
    tag: 'Office',
  },
  {
    username: 'user007',
    name: '孙七',
    role: '会员端客服',
    state: '以禁用',
    last:'2023-01-2511:50:19',
    creat:'2022-10-2621:10:13',
    tag: 'Home',
  },
  {
    username: 'user008',
    name: '周八',
    role: '智能柜终端客服',
    state: '正常',
    last:'2023-01-2511:50:19',
    creat:'2022-10-2621:10:13',
    tag: 'Office',
  },
  {
    username: 'user009',
    name: '吴九',
    role: '快递员客服',
    state: '正常',
    last:'2023-01-2511:50:19',
    creat:'2022-10-2621:10:13',
    tag: 'Home',
  },
  {
    username: 'user010',
    name: '郑十',
    role: '快递员客服',
    state: '已禁用',
    last:'2023-01-2511:50:19',
    creat:'2022-10-2621:10:13',
    tag: 'Office',
  },
]

const currentPage = ref(40);
const pageSize = ref(20);
const small = ref(false);
const background = ref(true);
const disabled = ref(false);
const pagerCount = ref(6);
</script>

<style>
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);


}

</style>